<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../css/category.css" rel="stylesheet"/>
    <link href="../../iconfonts/iconfont.css" rel="stylesheet" />
    <script src="../../js/mui.min.js"></script>
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <div class="mui-row">
            <div class="mui-col-xs-3 mui-col-sm-3">
                <span class="mui-icon iconfont icon-didian"></span>
                <span class="mui-tab-label">上海</span>
            </div>
            <div class="mui-col-xs-6 mui-col-sm-6">
                <div class="mui-input-row mui-search">
                    <input type="search" class="mui-input-clear" placeholder="输入商品名称">
                </div>
            </div>
            <div class="mui-col-xs-3 mui-col-sm-3">
                <span class="mui-icon iconfont icon-zixun"></span>
                <span class="mui-tab-label">咨询</span>
            </div>
        </div>
    </header>
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item " id="navtab-index" href="index.html">
            <span class="mui-icon iconfont icon-shouye"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item mui-active" id="navtab-category" href="category.html">
            <span class="mui-icon iconfont icon-fenlei"></span>
            <span class="mui-tab-label">分类</span>
        </a>
        <a class="mui-tab-item" id="navtab-buycar" href="buycar.html">
            <span class="mui-icon iconfont icon-gouwuchekong"></span>
            <span class="mui-tab-label">购物车</span>
        </a>
        <a class="mui-tab-item" id="navtab-wode" href="center.html">
            <span class="mui-icon iconfont icon-wode"></span>
            <span class="mui-tab-label">我的</span>
        </a>
    </nav>
    <div class="mui-content mui-row mui-fullscreen" style="background-color: #fff;">
        <div class="mui-col-xs-3" style="background-color: #efefef;">
            <div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
                <a class="mui-control-item" href="#category1">热门类目</a>
                <a class="mui-control-item" href="#category2">男科用药</a>
                <a class="mui-control-item" href="#category3">神经用药</a>
                <a class="mui-control-item" href="#category4" >心脑用药</a>
                <a class="mui-control-item" href="#category5" >肝胆用药</a>
                <a class="mui-control-item" href="#category6" >呼吸道用药</a>
                <a class="mui-control-item" href="#category7" >皮肤用药</a>
                <a class="mui-control-item" href="#category8" >风湿骨科用药</a>
                <a class="mui-control-item" href="#category9" >滋补调养用药</a>
                <a class="mui-control-item" href="#category10" >消化道用药</a>
                <a class="mui-control-item" href="#category11" >五官用药</a>
                <a class="mui-control-item" href="#category12" >妇科用药</a>
                <a class="mui-control-item" href="#category13" >内分泌用药</a>
                <a class="mui-control-item" href="#category14" >肿瘤用药</a>
                <a class="mui-control-item" href="#category15" >对症找药</a>
                <a class="mui-control-item" href="#category16" >滋补保健</a>
                <a class="mui-control-item" href="#category17" >维生素钙</a>
                <a class="mui-control-item" href="#category18" >隐形眼镜</a>
                <a class="mui-control-item" href="#category19" >医疗器械</a>
                <a class="mui-control-item" href="#category20" >成人用品</a>
                <a class="mui-control-item" href="#category21" >药妆个护</a>
                <a class="mui-control-item" href="#category22" >宠物生活</a>
                <a class="mui-control-item" href="#category23" >母婴/家电</a>
            </div>
        </div>
        <div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
            <div class="title">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell pad-13">
                        <a href="#">热门类目</a>
                    </li>
                </ul>

                <div id="category1" class="mui-control-content mui-active">
                    <ul class="mui-table-view mui-grid-view">
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                            <a href="#">
                                <img class="mui-media-object mui-category-img" src="../../images/category1/cat1.png">
                                <div class="mui-media-body">中暑</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                            <a href="#">
                                <img class="mui-media-object mui-category-img" src="../../images/category1/cat2.png">
                                <div class="mui-media-body">日晒伤</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                            <a href="#">
                                <img class="mui-media-object mui-category-img" src="../../images/category1/cat4.png">
                                <div class="mui-media-body">日光性皮炎</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                            <a href="#">
                                <img class="mui-media-object mui-category-img" src="../../images/category1/cat3.png">
                                <div class="mui-media-body">上火</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                            <a href="#">
                                <img class="mui-media-object mui-category-img" src="../../images/category1/cat5.png">
                                <div class="mui-media-body">腹泻</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                            <a href="#">
                                <img class="mui-media-object mui-category-img" src="../../images/category1/cat6.png">
                                <div class="mui-media-body">消化不良</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                            <a href="#">
                                <img class="mui-media-object mui-category-img" src="../../images/category1/cat7.png">
                                <div class="mui-media-body">蚊虫叮咬</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                            <a href="#">
                                <img class="mui-media-object mui-category-img" src="../../images/category1/cat8.png">
                                <div class="mui-media-body">防晒</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                            <a href="#">
                                <img class="mui-media-object mui-category-img" src="../../images/category1/cat9.png">
                                <div class="mui-media-body">祛痱</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                            <a href="#">
                                <img class="mui-media-object mui-category-img" src="../../images/category1/cat10.png">
                                <div class="mui-media-body">湿疹</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                            <a href="#">
                                <img class="mui-media-object mui-category-img" src="../../images/category1/cat11.png">
                                <div class="mui-media-body">脚气</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                            <a href="#">
                                <img class="mui-media-object mui-category-img" src="../../images/category1/cat12.png">
                                <div class="mui-media-body">结膜炎</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                            <a href="#">
                                <img class="mui-media-object mui-category-img" src="../../images/category1/cat13.png">
                                <div class="mui-media-body">关节痛</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                            <a href="#">
                                <img class="mui-media-object mui-category-img" src="../../images/category1/cat14.png">
                                <div class="mui-media-body">过敏性鼻炎</div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                            <a href="#">
                                <img class="mui-media-object mui-category-img" src="../../images/category1/cat15.png">
                                <div class="mui-media-body">失眠</div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div id="category2" class="mui-control-content">
                    <ul class="mui-table-view mui-grid-view">
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                            <a href="#">
                                <img class="mui-media-object mui-category-img" src="../../images/category1/cat15.png">
                                <div class="mui-media-body">失眠</div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script>
        mui.init({
            swipeBack: true //启用右滑关闭功能
        });
        var controls = document.getElementById("segmentedControls");
        var contents = document.getElementById("segmentedControlContents");
         //默认选中第一个
        controls.querySelector('.mui-control-item').classList.add('mui-active');
        contents.querySelector('.mui-control-content').classList.add('mui-active');
    </script>
    <script src="../../js/common.js"></script>
</body>
</html>